<template>
	<!-- 员工登录页面 -->
	<view>
		<view class="logo">
			<view class="img">
				<image :src="logo" mode="widthFix"></image>
			</view>
		</view>
		<view class="form re">
			<view class="username">
				<input placeholder="请输入登录账号" v-model="username" placeholder-style="color: #ccc;" />
			</view>
			<view class="password">
				<input placeholder="请输入登录密码" v-model="password" password=true placeholder-style="color: #ccc;" />
			</view>
			<view class="res btn">
				<view @click="toLogin" :disabled="disabled">立即登录</view>
			</view>
		</view>
	</view>
</template>

<script>
import { checkPhone, isEmpty, isEmptyObj } from '../../utils';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			username: "",
			password: "",
			disabled: true
		}
	},
	computed: {
		...mapState('sys', ['logo']),
	},
	onLoad() {
	},
	onBackPress() {
		return uni.switchTab({
			url: '/pages/user/user'
		})
	},
	methods: {
		...mapMutations('sys', ['setLogo']),
		...mapMutations('user', ['setToken', 'setUserInfo']),
		// #ifdef MP-WEIXIN
		toLogin() {
			if (isEmpty(this.username)) {
				this.$toast('登录账号必须填写');
				this.disabled = false;
				return false;
			}
			if (isEmpty(this.password)) {
				this.$toast('密码必须填写');
				this.disabled = false;
				return false;
			}
			const params = {
				username: this.username,
				password: this.password
			}
			this.$ajax.get('superUser/ygOnWeb', params).then(res => {
				if (res.success) {
					this.setToken(res.result);
					this.getUserInfo();
				} else {
					this.$toast(res.message);
				}
			})

		},
		getUserInfo() {
			this.$ajax.get('user/info').then(data => {
				if (data.success) {
					this.setUserInfo(data.result);
					uni.hideTabBar();
					this.$toast(data.message);
					return uni.navigateTo({
						url: '/pages/product/scan'
					});
				} else {
					this.$toast(data.message);
				}
			})
		}
		//#endif

	}
}
</script>

<style lang="scss">
page {
	background: #FFFFFF;
	height: 100%;
}

.icon {
	color: #ffffff;
}

.logo {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	.img {
		width: 200rpx;
		height: 200rpx;
		margin: 50rpx 0;

		image {
			width: 100%;
			height: 100%;
			border-radius: 100%;
			border: 1px solid $base-color;
		}
	}
}

.form {
	width: 100%;
	padding: 0 7%;
	font-size: 30upx;

	.username,
	.password,
	.code {
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		border-radius: 45upx;
		background-color: #FFFFFF;
		border: 1px solid $base-color;
		padding: 0 45upx;
		box-sizing: border-box;
		margin-bottom: 26upx;

		input {
			width: 100%;
			height: 50upx;
			color: $font-color-000;
			font-weight: 200;
			font-size: $font-lg;
		}
	}

	.btn {
		color: #FFFFFF;
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20upx;
		background-color: $nav-bg;
		font-size: $font-lg;
	}
}

.re {
	.username {
		position: relative;

		.get-code {
			position: absolute;
			height: 90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;
			padding: 0 40upx;
			z-index: 3;

			&:after {
				content: " ";
				width: 2upx;
				height: 50upx;
				background-color: $nav-bg;
				position: absolute;
				z-index: 3;
				margin-right: 100%;
				left: 0;
				top: 20upx;
			}
		}
	}

	.res {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100upx;
	}
}
</style>
